<template>
  <div class="xiangxun">
    <el-row :gutter="20">
  <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="6" v-for="(product,key) in products[0]" :key="key" >
     <a href @click.prevent="buy(product.productId)">
    <el-card :body-style="{ padding: '0px' }" shadow="never">
       <div class="img"><img :src="getPic(product.productPic)" class="image" ></div>
      <div style="padding: 0px;">
        <div class="xianshishi">
          <h3>{{product.productName}}</h3>
          <div  class="title2">￥{{product.price}}</div>
        </div>

      </div>
    </el-card></a>
  </el-col>
   </el-row>

  </div>
</template>

<script>

export default { 

  data(){
    return{
      products:[]
    }
  }, 
  methods: {
    buy(index){
      console.log(index)
      this.$store.state.productId=index;
      this.$router.push("/index/OrtherDetail")
    },
    getPic(pic){
      let path = 'http://localhost:3000/images/' + pic
      console.log(path)
      
      return path
      // return require("../assets/" + pic);
    },
  },
 created(){
    this.$store.state.navIndex="5"
   this.$axios
        .get('http://localhost:3000/product/201904')
        .then(res =>{
          console.log(res.data.data)
          this.products.push(res.data.data)
          console.log(this.products[0])
        })
        .catch(err =>{
          console.log(err)
        })
      },

}

</script>
<style>
.xiangxun{
  font-family: "楷体";
    background-image: url("../assets/body_bg.png")
}
 .xiangxun .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover{
  color: #ffd04b;
}
.xiangxun .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
   color: #ffd04b;

}
.xiangxun .el-col[data-v-53dbe795] {
  margin-bottom:20px; }
.xiangxun .el-button--text {
   color: #ffd04b;
 }
.xiangxun .el-col[data-v-53dbe795] {
  margin-bottom:20px; }
  .xiangxun .el-card__body{
    width: 227px;
    overflow: hidden;
  }
  .xiangxun  .el-card{
    width: 227px;
    min-height: auto;
    padding: 0;
    margin: 14px;
    float: left;
    text-align: center;
    position: relative;
    border: 1px solid #ebebeb;
    line-height: 18px !important;
    box-sizing: border-box;
  }
</style>
<style scoped>
.time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }
  .image {
    width: 227px;
    height: 227px;
    display: block;
    margin: 0 auto;

  }
  

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
  .xiangxun{
    height: 100%;
    width: 70%;
    margin: 0 auto;
  }
 .el-link.el-link--default:hover{
   color: #ffd04b;
 }
 .el-link.el-link--default {
   color: #909399;
   width: 100px;
    padding: 0px;
 }
 h3{
   padding: 4px 0 3px;
    margin: 0;
    font-size: 15px;
    display: block;
    font-weight: normal;
    color: #363636;
 }
 .title2{
  font-size: 14px;
  letter-spacing: 3px;
  color: #363636;
  margin: 0;
  text-align: center;
  width: 100%;
 }
 .el-card{
   overflow: hidden;
 }
 .xianshishi{
   height: 40px;
 }
 .el-card:hover .xianshishi{
   background-color: #E1758F;

 }
 .el-card:hover .image{
transform: scale(1.03,1.03);
transition: 1s;
 }
.el-card:hover h3,.el-card:hover .title2{
  color:#f7f7f7;
}
 .img{
   width: 227px;
   height: 227px;
   overflow: hidden;
 }
   @media screen and (max-width:600px){
       .xiangxun{
         width: 100%;
       }
    }
</style>
